<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
    <head>
        <!-- Summernote CSS  -->
        <link rel="stylesheet" type="text/css" href="${rootPath}/js/plugins/summernote/summernote.css">
        <link rel="stylesheet" type="text/css" href="${rootPath}/js/plugins/summernote/summernote-bs3.css">
        <%@include file="../common/head.jspf" %>
    </head>

    <body class="loan-detail-page sb-l-o sb-r-c sb-l-o" data-menu="#menu_loan" data-list="#li_loan_list">

        <!-- 主体内容开始 -->
        <div id="main">

            <!--侧边导航栏-->
            <%@include file="../common/sidebar.jspf" %>

            <!-- Start: Content-Wrapper -->
            <section id="content_wrapper">

                <!-- 顶部导航 -->
                <header id="topbar">
                    <div class="topbar-left">
                        <ol class="breadcrumb">
                            <li class="crumb-active">
                                <span>软擎科技</span>
                            </li>
                            <li class="crumb-icon">
                                <a href="dashboard"><span class="glyphicon glyphicon-home"></span></a>
                            </li>
                            <!-- 当前页 -->
                            <li class="crumb-trail">票据信息</li>
                        </ol>
                    </div>
                    <div class="topbar-right">
                        <!-- 登录信息 -->
                        <%@include file="../common/session.jspf" %>
                    </div>
                </header>
                <!-- 顶部导航结束 -->

                <!-- 页面内容开始 -->
                <section id="content" class="p15">
                    <div id="loan" data-id="${model.id}" data-status="${model.status}" class="hidden"></div>

                    <%@include file="common/nav.jspf" %>
                    <!-- 相关操作下拉菜单 -->
                    <div id="operationHTML" class="btn-group profile-settings-btn pull-right">
                        <button type="button" class="btn btn-default dropdown-toggle pl20" data-toggle="dropdown"><i class="fa fa-wrench mr5"></i>相关操作
                            <span class="caret ml5"></span>
                        </button>
                        <ul class="dropdown-menu pull-right" role="menu">
                            <li class="editLink hidden">
                                <a href="bill/edit/#id"><span class="glyphicons glyphicons-edit mr5"></span>票据编辑</a>
                            </li>
                            <li class="divider extra hidden"></li>
                            <li class="settleLink extra hidden">
                                <a href="javascript:;" data-id="#id" onclick="settleLoan(this);"><span class="glyphicons glyphicons-lock text-danger fs12 mr5"></span>票据放款</a>
                            </li>
                            <li class="cancelScheduleLink extra hidden">
                                <a href="javascript:;" onclick="cancelSchedule(this);" data-id="#id"><span class="glyphicons glyphicons-history text-danger fs12 mr5"></span>取消排期</a>
                            </li>
                            <li class="repayment extra hidden">
                                <a href="repayment/undue"><span class="glyphicon glyphicon-dashboard mr5"></span>还款管理</a>
                            </li>
                            <li class="cancelLink" data-id="#id">
                                <a href="javascript:;" onclick="cancel(this);" data-id="#id"><span class="glyphicons glyphicons-remove text-danger fs12 mr5"></span>取消票据</a>
                            </li>
                            <li class="archiveLink extra hidden" data-id="#id">
                                <a href="javascript:;" onclick="archive(this);" data-id="#id"><span class="glyphicons glyphicons-inbox_in text-danger fs12 mr5"></span>存档</a>
                            </li>
                        </ul>
                    </div>
                    <hr class="br-light mt10 mb10" />

                    <div class="row">
                        <!--第一列-->
                        <div class="col-md-8">

                            <div class="row bg-white mn mb30 pb10">
                                <!-- 票据基本信息 -->
                                <div class="col-md-6 br-r">
                                    <h5 class="mt5 mbn ph10 pv10 br-b fw700 lh25">票据基本信息 
                                        <a class="btn btn-default btn-xs pull-right editLink hidden" href="bill/edit/${model.id}" target="_blank" role="button"><i class="fa fa-edit text-muted-lighter mr5"></i>修改</a>
                                    </h5>
                                    <table class="table mb10 tc-med-1 tc-fs13-last">
                                        <thead>
                                            <tr class="hidden">
                                                <th>#</th>
                                                <th>#</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td class="va-m">
                                                    <span class="fs15 fw700 va-m mr10"><i class="fa fa-tag text-success pr15"></i><span id="title"><i class="fa fa-spin fa-spinner"></i></span></span>
                                                </td>
                                                <td class="text-right"><span id="percentage"><i class="fa fa-spin fa-spinner"></i></span></td>
                                            </tr>
                                            <tr>
                                                <td colspan="2">
                                                    <div class="progress progress-bar-xs mn">
                                                        <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="va-m fw600 text-muted">
                                                    <i class="fa fa-arrow-circle-o-left fs15 fw700 text-success pr15"></i>还款方式</td>
                                                <td class="text-right"><span class="repayMethod"><i class="fa fa-spin fa-spinner"></i></span></td>
                                            </tr>
                                            <tr>
                                                <td class="va-m fw600 text-muted">
                                                    <i class="fa fa-shopping-cart text-success fs15 fw700 pr15"></i>票据金额</td>
                                                <td class="text-right"><span id="amount"><i class="fa fa-spin fa-spinner"></i></span></td>
                                            </tr>
                                            <tr>
                                                <td class="va-m fw600 text-muted">
                                                    <i class="fa fa-star text-success fs15 fw700 pr15"></i>年化利率</td>
                                                <td class="text-right"><span class="rate"><i class="fa fa-spin fa-spinner"></i></span></td>
                                            </tr>
                                            <tr>
                                                <td class="va-m fw600 text-muted">
                                                    <i class="fa fa-calendar-o text-success fw700 pr15"></i>借款周期</td>
                                                <td class="text-right"><span id="duration"><i class="fa fa-spin fa-spinner"></i></span></td>
                                            </tr>
                                            <tr>
                                                <td class="va-m fw600 text-muted">
                                                    <i class="fa fa-clock-o text-success fs15 fw700 pr15"></i>筹款时长</td>
                                                <td class="text-right"><span id="timeOut"><i class="fa fa-spin fa-spinner"></i></span></td>
                                            </tr>
                                            <tr>
                                                <td class="va-m fw600 text-muted">
                                                    <i class="fa fa-circle text-success fs15 fw700 pr15"></i>票据状态</td>
                                                <td class="text-right"><code id="loanStatusDesc" class="pull-right"><i class="fa fa-spin fa-spinner"></i></code></td>
                                            </tr>
                                            <tr>
                                                <td class="va-m fw600 text-muted">
                                                    <i class="fa fa-circle text-success fs15 fw700 pr15"></i>票据类型</td>
                                                <td class="text-right"><span id="loanProduct"><i class="fa fa-spin fa-spinner"></i></span></td>
                                            </tr>
                                            <tr>
                                                <td class="va-m fw600 text-muted">
                                                    <i class="fa fa-circle text-success fs15 fw700 pr15"></i>申请日期</td>
                                                <td class="text-right fw400"><span id="submitTime"><i class="fa fa-spin fa-spinner"></i></span></td>
                                            </tr>
                                        </tbody>
                                    </table>

                                    <h5 class="mt5 mbn ph10 pv10 br-b fw700 lh25">投标规则 
                                        <a class="btn btn-default btn-xs pull-right hidden" href="" role="button"><i class="fa fa-edit text-muted-lighter mr5"></i>修改</a>
                                    </h5>
                                    <table class="table mbn tc-med-1 tc-fs13-last">
                                        <thead>
                                            <tr class="hidden">
                                                <th>属性名称</th>
                                                <th>属性值</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td><i class="fa fa-circle text-alert fs8 pr15"></i>
                                                    <span>最小投标金额</span>
                                                </td>
                                                <td class="text-right" id="minAmount"><i class="fa fa-spin fa-spinner"></i></td>
                                            </tr>
                                            <tr>
                                                <td><i class="fa fa-circle text-alert fs8 pr15"></i>
                                                    <span>最大投标金额</span>
                                                </td>
                                                <td class="text-right" id="maxAmount"><i class="fa fa-spin fa-spinner"></i></td>
                                            </tr>
                                            <tr>
                                                <td><i class="fa fa-circle text-alert fs8 pr15"></i>
                                                    <span>投标金额增量</span>
                                                </td>
                                                <td class="text-right" id="stepAmount"><i class="fa fa-spin fa-spinner"></i></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>

                                <div class="col-md-6">

                                    <!--借款人信息-->

                                    <h5 class="mt5 mbn ph10 pv10 br-b fw700 lh25">借款人信息 
                                        <a class="btn btn-default btn-xs pull-right user-link" href="" role="button" target="_blank">
                                            <i class="fa fa-plus text-muted-lighter mr5"></i>详情</a>
                                    </h5>
                                    <table class="table mb10 tc-med-1 tc-fs13-last">
                                        <thead>
                                            <tr class="hidden">
                                                <th>用户名</th>
                                                <th>充值金额</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td><i class="fa fa-circle text-warning fs8 pr15"></i>
                                                    <span>用户名</span>
                                                </td>
                                                <td class="text-right"><span id="user"><i class="fa fa-spin fa-spinner"></i></span></td>
                                            </tr>
                                            <tr>
                                                <td><i class="fa fa-circle text-warning fs8 pr15"></i>
                                                    <span>手机号码</span>
                                                </td>
                                                <td class="text-right"><span id="mobile"><i class="fa fa-spin fa-spinner"></i></span></td>
                                            </tr>
                                            <tr>
                                                <td><i class="fa fa-circle text-warning fs8 pr15"></i>
                                                    <span>真实姓名</span>
                                                </td>
                                                <td class="text-right"><span id="realName"><i class="fa fa-spin fa-spinner"></i></span></td>
                                            </tr>
                                            <tr>
                                                <td><i class="fa fa-circle text-warning fs8 pr15"></i>
                                                    <span>身份证号</span>
                                                </td>
                                                <td class="text-right"><span id="idNumber"><i class="fa fa-spin fa-spinner"></i></span></td>
                                            </tr>
                                            <tr class="hidden">
                                                <td><i class="fa fa-circle text-warning fs8 pr15"></i>
                                                    <span>信用等级</span>
                                                </td>
                                                <td class="text-warning text-right"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-o"></i></td>
                                            </tr>
                                        </tbody>
                                    </table>

                                    <!--票据费率信息-->

                                    <h5 class="mt5 mbn ph10 pv10 br-b fw700 lh25">票据费率信息 
                                        <a class="btn btn-default btn-xs pull-right hidden" href="" role="button"><i class="fa fa-edit text-muted-lighter mr5"></i>修改</a>
                                    </h5>
                                    <table class="table mbn tc-med-1 tc-fs13-last">
                                        <thead>
                                            <tr class="hidden">
                                                <th>属性名称</th>
                                                <th>属性值</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td><i class="fa fa-circle text-primary fs8 pr15"></i>
                                                    <span>借款服务费</span>
                                                </td>
                                                <td class="text-right"><span id="serviceFee"><i class="fa fa-spin fa-spinner"></i></span></td>
                                            </tr>
                                            <tr>
                                                <td><i class="fa fa-circle text-primary fs8 pr15"></i>
                                                    <span>借款担保费</span>
                                                </td>
                                                <td class="text-right"><span id="guaranteeFee"><i class="fa fa-spin fa-spinner"></i></span></td>
                                            </tr>
                                            <tr>
                                                <td><i class="fa fa-circle text-primary fs8 pr15"></i>
                                                    <span>借款管理费</span>
                                                </td>
                                                <td class="text-right"><span id="manageFee"><i class="fa fa-spin fa-spinner"></i></span></td>
                                            </tr>
                                            <tr>
                                                <td><i class="fa fa-circle text-primary fs8 pr15"></i>
                                                    <span>投资管理费</span>
                                                </td>
                                                <td class="text-right"><span id="investFee"><i class="fa fa-spin fa-spinner"></i></span></td>
                                            </tr>
                                            <tr>
                                                <td><i class="fa fa-circle text-primary fs8 pr15"></i>
                                                    <span>逾期罚息</span>
                                                </td>
                                                <td class="text-right"> - </td>
                                            </tr>
                                            <tr>
                                                <td><i class="fa fa-circle text-primary fs8 pr15"></i>
                                                    <span>其他费率</span>
                                                </td>
                                                <td class="text-right"> - </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    <h5 class="mt5 mbn ph10 pv10 br-b fw700 lh25 contractall-status">总合同
                                        <a class="btn btn-default btn-xs pull-right contractall-link" href="" role="button" target="_blank">
                                            <i class="fa fa-plus text-muted-lighter mr5"></i>查看</a>
                                    </h5>
                                </div>
                            </div>
                        </div>

                        <!--操作面板-->

                        <div class="col-md-4">
                            <!--票据审核面板-->
                            <div class="panel panel-system panel-border top hidden" id="loanAuditPanel">
                                <div class="panel-heading">
                                    <span class="panel-title">
                                        <i class="fa fa-bell"></i><span id="loanAuditTitle">票据审核</span></span>
                                </div>
                                <div class="panel-body" id="loanAuditPanelDetail">
                                    <form class="form-horizontal" role="form">
                                        <div class="form-group">
                                            <div class="col-lg-12">
                                                <textarea class="form-control" id="auditComment" rows="2" placeholder="审核意见..."></textarea>
                                            </div>
                                        </div>
                                        <div class="form-group mbn">
                                            <div class="col-xs-6">
                                                <button type="button" class="btn btn-system btn-block" id="loanApproveBtn">审核通过</button>
                                            </div>
                                            <div class="col-xs-6">
                                                <button type="button" class="btn btn-default light btn-block" id="loanRejectBtn">驳回申请</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <!--票据排期面板-->
                            <div class="panel panel-primary panel-border top  hidden" id="loanSchedulePanel">
                                <div class="panel-heading">
                                    <span class="panel-title">
                                        <i class="fa fa-clock-o"></i><span id="loanScheduleTitle">票据排期</span></span>
                                    <div class="widget-menu pull-right">
                                        <button class="btn btn-default btn-xs hidden" id="toggleCalendarBtn">更改</button>
                                    </div>
                                </div>
                                <div class="panel-body pn" id="loanSchedulePanelDetail">
                                    <!--倒计时显示-->
                                    <div id="openCountDown" class="fs20 text-center p14 hidden"></div>
                                    <div class="admin-form theme-primary br-n" id="calendarPanel">
                                        <!--排期日历-->
                                        <div id="loanOpenTimePicker" class="no-border br-b"></div>
                                        <div class="row p14 admin-form openTimeSelector">
                                            <div class="col-xs-3 text-right pt15 prn">开标时间：</div>
                                            <div class="col-xs-4">
                                                <label class="field select">
                                                    <select name="openHour" id="openHour">
                                                        <c:forEach var="i" begin="0" end="23" step="1">
                                                            <option value="${i}">${i}</option>
                                                        </c:forEach>
                                                    </select>
                                                    <!--<i class="arrow"></i>-->
                                                    <span class="select-label">点</span>
                                                </label>
                                            </div>
                                            <div class="col-xs-4">
                                                <label class="field select">
                                                    <select name="openMin" id="openMin">
                                                        <c:forEach var="i" begin="0" end="59" step="5">
                                                            <option value="${i}">${i}</option>
                                                        </c:forEach>
                                                    </select>
                                                    <span class="select-label">分</span>
                                                    <!--<i class="arrow"></i>-->
                                                </label>
                                            </div>
                                        </div>
                                        <div class="row p14">
                                            <div class="col-xs-12">
                                                <button type="button" class="btn btn-primary btn-block" id="scheduleLoanBtn">确定开标时间</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--结标倒计时面板-->
                            <div class="panel panel-warning  panel-border top hidden" id="finishCountDownPanel">
                                <div class="panel-heading">
                                    <span class="panel-title">
                                        <i class="fa fa-rocket"></i><span id="finishCountDownPanelTitle">开放投标中</span></span>
                                </div>
                                <div class="panel-body pn" id="finishCountDownPanelDetail">
                                    <!--倒计时显示-->
                                    <div id="finishCountDown" class="fs20 text-center p14"></div>
                                </div>
                            </div>
                            <!--已放款状态面板-->
                            <div class="panel panel-alert  panel-border top hidden" id="settlePanel">
                                <div class="panel-heading">
                                    <span class="panel-title">
                                        <i class="fa fa-lock"></i><span id="settlePanelTitle">票据已放款</span></span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <div class="tab-block mb25">
                                <ul class="nav nav-tabs">
                                    <li class="active">
                                        <a href="#description" data-toggle="tab">项目简介</a>
                                    </li>
                                    <li>
                                        <a href="#mortgageInfo" data-toggle="tab">风控信息</a>
                                    </li>
                                    <li>
                                        <a href="#contractproperty" data-toggle="tab">合同参数</a>
                                    </li>
                                    <!--                                    <li>
                                                                            <a href="#guaranteeInfo" data-toggle="tab">相关资料</a>
                                                                        </li>-->
                                </ul>
                                <div class="tab-content" id="loan-desc">
                                    <!--票据描述-->
                                    <div id="description" class="tab-pane active">
                                        <div class="mb5 text-right">
                                            <button class="btn btn-default light btn-sm openEditor"><i class="fa fa-edit text-muted-lighter mr5"></i>修改</button>
                                            <div class="shide hiddenEditor">
                                                <button class="btn btn-default  btn-sm light mr5 cancelEditDesc">取消</button>
                                                <button class="btn btn-primary  btn-sm saveEditDesc" data-url="bill/updateDescription"><i class="fa fa-check mr5"></i>保存修改</button>
                                            </div>
                                        </div>
                                        <div class="display"></div>
                                        <div class="editor shide">
                                            <div class="summernote"></div>
                                        </div>
                                    </div>
                                    <!--抵押说明-->
                                    <div id="mortgageInfo" class="tab-pane">
                                        <div class="mb5 text-right">
                                            <button class="btn btn-default light btn-sm  openEditor"><i class="fa fa-edit text-muted-lighter mr5"></i>修改</button>
                                            <div class="shide hiddenEditor">
                                                <button class="btn btn-default  btn-sm light mr5 cancelEditDesc">取消</button>
                                                <button class="btn btn-primary  btn-sm saveEditDesc" data-url="bill/updateMortgageInfo"><i class="fa fa-check mr5"></i>保存修改</button>
                                            </div>
                                        </div>
                                        <div class="display"></div>
                                        <div class="editor shide">
                                            <div class="summernote"></div>
                                        </div>
                                    </div>
                                    <!--合同参数-->
                                    <div id="contractproperty" class="tab-pane">
                                        <div class="mb5 text-right">
                                            <button class="btn btn-default light btn-sm  openEditor contrac_button"><i class="fa fa-edit text-muted-lighter mr5"></i>修改</button>
                                            <div class="shide hiddenEditor">
                                                <button class="btn btn-default  btn-sm light mr5 cancelEditDesc">取消</button>
                                                <button class="btn btn-primary  btn-sm saveEditDesc" data-url="loan/updateContractProperty"><i class="fa fa-check mr5"></i>保存修改</button>
                                            </div>
                                        </div>
                                        <div class="display"></div>
                                        <div class="editor shide">
                                            <div class="summernote"></div>
                                        </div>
                                    </div>
                                    <!--担保说明-->
                                    <div id="guaranteeInfo" class="tab-pane">
                                        <div class="mb5 text-right">
                                            <button class="btn btn-default light btn-sm  openEditor"><i class="fa fa-edit text-muted-lighter mr5"></i>修改</button>
                                            <div class="shide hiddenEditor">
                                                <button class="btn btn-default  btn-sm light mr5 cancelEditDesc">取消</button>
                                                <button class="btn btn-primary  btn-sm saveEditDesc" data-url="bill/updateGuaranteeInfo"><i class="fa fa-check mr5"></i>保存修改</button>
                                            </div>
                                        </div>
                                        <div class="display"></div>
                                        <div class="editor shide">
                                            <div class="summernote"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                <!-- 页面内容结束 -->

            </section>
        </div>
        <!-- 主体内容结束 -->

        <!-- 公共函数 -->
        <%@include file="../common/scripts.jspf" %>
        <script type="text/javascript" src="${rootPath}/js/admin-tools/admin-forms/js/jquery-ui-timepicker.min.js"></script>
        <script type="text/javascript" src="${rootPath}/js/admin-tools/admin-forms/js/lang/jquery-ui-timepicker-zh.js"></script>
        <script type="text/javascript" src="${rootPath}/js/plugins/jquery/jquery.countdown.min.js"></script>
        <script type="text/javascript" src="${rootPath}/js/plugins/summernote/summernote.min.js"></script>
        <script type="text/javascript" src="${rootPath}/js/plugins/summernote/lang.js"></script>
        <script type="text/javascript" src="${rootPath}/js/pages/bill/detail.js"></script>
    </body>
</html>
